<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<%@ include file="../common/common.jsp"%>
		<script type="text/javascript" src="${ctx}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
		<title>供应商列表</title>
	</head>

	<body>
		<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页<span class="c-gray en">&gt;</span> 商品管理 <span class="c-gray en">&gt;</span> 供应商列表
			<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<div class="page-container">
			<div class="text-c">
				名称：
				<input type="text" id="name" placeholder=" 名称" style="width:200px" class="input-text mr-10">
				<button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
			</div>
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l">
					<a class="btn btn-primary radius" onclick="add('添加','${ctx}/productManage/supplierAdd.html')" href="javascript:;">
						<i class="Hui-iconfont">&#xe600;</i> 添加
					</a>
				</span>
			</div>
			<div class="mt-20">
				<table id="table" class="table table-border table-bordered table-bg table-hover table-sort">
					<thead>
						<tr class="text-c">
							<th width="25"><input type="checkbox" name="checkAll" value=""></th>
							<th>序号</th>
							<th>名称</th>
							<th>联系人</th>
							<th>店铺链接</th>
							<th>证件号</th>
							<th>QQ号</th>
							<th>旺旺</th>
							<th>微信号</th>
							<th>座机号</th>
							<th>手机号</th>
							<th>邮箱</th>
							<th>联系地址</th>
							<th>备注</th>
							<th>添加时间</th>
							<th>ID</th>
							<th>所属平台</th>
							<th>操作</th>
						</tr>
					</thead>
				<tbody>
					<tr class="text-c">
						<td colspan="9">数据获取中....</td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>
	<script type="text/javascript">
			$('#table').dataTable({
				"dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer"ip>',
				"aaSorting": [[ 14, "desc" ]],//默认第几个排序
				"bStateSave": false,//状态保存
				"aoColumnDefs": [
				     			////{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
				     			{"orderable":false,"aTargets":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,15,16,17]}// 不参与排序的列
				     		],
				"columnDefs":[
				    		  	{
				    		  		//设置列不参与搜索
				    		  		"targets":[0,1,3,4,5,6,7,8,9,10,11,12,13,15,16,17],
				    		  		"serchable":false
				    		  	}
				    		  ],
				"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
				"bServerSide": true,
				"sAjaxSource": ctx + "/productManage/findSupplierPage.do?id=${id}",//ajax地址 
	          	//配置列要显示的数据
	            "aoColumns": [
					{"sDefaultContent": ''},
					{"sDefaultContent": ''},
					{ "mData": "name" },
	            	{ "mData": "contacts" },
	            	{ "mData": "shopUrl" },
	    			{ "mData": 'idCard', "mRender": function ( data, type, full ) {
	    				if(empty(full.idCard)){
	    					return "-";
	    				}else{
	    					return full.idCard;
	    				}
	    			}},
	    			{ "mData": 'qq', "mRender": function ( data, type, full ) {
	    				if(empty(full.qq)){
	    					return "-";
	    				}else{
	    					return full.qq;
	    				}
	    			}},
	    			{ "mData": 'ww', "mRender": function ( data, type, full ) {
	    				if(empty(full.ww)){
	    					return "-";
	    				}else{
	    					return full.ww;
	    				}
	    			}},
	    			{ "mData": 'weixin', "mRender": function ( data, type, full ) {
	    				if(empty(full.weixin)){
	    					return "-";
	    				}else{
	    					return full.weixin;
	    				}
	    			}},
	    			{ "mData": 'telPhone', "mRender": function ( data, type, full ) {
	    				if(empty(full.telPhone)){
	    					return "-";
	    				}else{
	    					return full.telPhone;
	    				}
	    			}},
	    			{ "mData": 'mobile', "mRender": function ( data, type, full ) {
	    				if(empty(full.mobile)){
	    					return "-";
	    				}else{
	    					return full.mobile;
	    				}
	    			}},
	    			{ "mData": 'email', "mRender": function ( data, type, full ) {
	    				if(empty(full.email)){
	    					return "-";
	    				}else{
	    					return full.email;
	    				}
	    			}},
	    			{ "mData": 'address', "mRender": function ( data, type, full ) {
	    				if(empty(full.address)){
	    					return "-";
	    				}else{
	    					return full.address;
	    				}
	    			}},
	    			{ "mData": 'remark', "mRender": function ( data, type, full ) {
	    				if(empty(full.remark)){
	    					return "-";
	    				}else{
	    					return full.remark;
	    				}
	    			}},
	    			{ "mData": 'timeAt', "mRender": function ( data, type, full ) {
	    				if(empty(full.timeAt)){
	    					return "-";
	    				}else{
	    					return dates(full.timeAt);
	    				}
	    			}},
	    			{ "mData": "id" },
	    			{ "mData": 'sysName', "mRender": function ( data, type, full ) {
	    				if(empty(full.sysName)){
	    					return "-";
	    				}else{
	    					return full.sysName;
	    				}
	    			}},
	            	{"sDefaultContent": ''} // sDefaultContent 如果这一列不需要填充数据用这个属性，值可以不写，起占位作用
	            ],
				"fnServerData": retrieveData,//执行方法
				"fnRowCallback": fnRowCallback
			});
			//给搜索按钮绑定点击事件
			$(document).on("click","#search",
					function() {
						//自己定义的搜索框，可以是时间控件，或者checkbox 等等
						var data = {};
						var name = $("#name").val();
						if(name.length != 0){
							data.name=name;
						}
						$('#table').DataTable().search(JSON.stringify(data)).draw();
					});
			
		function retrieveData(sSource, aoData, fnCallback) {
			var index = layer.load(0, {shade: false});
		    $.ajax({
		        type: "POST",
		        contentType: "application/x-www-form-urlencoded",
		        url: sSource,
		        dataType: "json",
		        data: aoData, 
		        success: function (resp) {
		        	layer.close(index);
		        	if(resp.code != "ok"){
						console.log("返回失败", resp);
						layer.msg(resp.msg,{icon: 5,time:2000});
		        	}else{
		        		var bizData = resp.object;
				        var data={
								"sEcho":bizData.userdata.sEcho, //当前显示的第一条数据
								"iTotalRecords":bizData.records,  //总记录数
								"iTotalDisplayRecords":bizData.records,  //当前显示的总记录数
								"aaData":bizData.rows //数据列表
				        };
				        fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式  	
		        	}
		        },
				error: function(data) {
					console.log("返回失败", data);
					layer.close(index);
					layer.msg(data.msg,{icon: 5,time:2000});
					$("table tbody").html('<tr class="text-c"><td colspan="11">'+data.msg+'...</td></tr>');
				}
		    });
		}
		
		// 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的
		function fnRowCallback(nRow, aData, iDisplayIndex) {
			$(nRow).addClass('text-c');
			$('td:eq(0)', nRow).html("<input type='checkbox' value='"+aData.id+"' name='del'>");
			$('td:eq(1)', nRow).html(iDisplayIndex+1);
			
			var editeHtml = "<a style='text-decoration:none' class='ml-5'  onClick=update('修改','"+aData.id+"')  href='javascript:;' title='修改'>修改</a>";
			$('td:eq(17)', nRow).html(editeHtml);

			return nRow;
		}
	</script>
	<script type="text/javascript">
	/*添加*/
	function add(title,url){
		layer_show(title,url);
	}
	/*修改*/
	function update(title,id){
		var url = ctx + "/productManage/supplierUpdate.html?id=" + id;
		layer_show(title,url);
	}
	</script>

</body>

</html>